<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const formSize = ref("default");
const r_login_form = ref<FormInstance>();
const m_login_form = reactive({
    user_name: "Hello",
    user_passwd: "",
    region: "",
    date1: "",
    date2: "",
    delivery: false,
    type: [],
    resource: "",
    desc: "",
});

const rl_login_form = reactive<FormRules>({
    user_name: [
        { required: true, message: "用户名不能为空", trigger: "blur" },
        { min: 3, max: 18, message: "用户名长度不符合要求", trigger: "blur" },
    ],
    user_passwd: [
        { required: true, message: "密码不能为空", trigger: "blur" },
        { min: 3, max: 18, message: "密码长度不符合要求", trigger: "blur" },
    ],
});
</script>

<template>
    <el-form ref="r_login_form" :model="m_login_form" :rules="rl_login_form" label-width="120px" class="c_login_form"
        :size="formSize">
        <el-form-item label="用户名" prop="user_name">
            <el-input v-model="m_login_form.user_name" />
        </el-form-item>
        <el-form-item label="密码" prop="user_passwd">
            <el-input type="password" v-model="m_login_form.user_passwd" />
        </el-form-item>
    </el-form>
</template>

<style scoped lang="scss">

</style>